<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡兔同笼</title>
    <style>
        .container {
            width: 60%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
        }

        h2 {
            text-align: center;
            padding-top: 10px;
        }

        p {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

        input {
            box-sizing: border-box;
            width: 60px;
        }

        #result {
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px dotted goldenrod;
            background-color: rgb(221, 220, 220);
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>循环解决鸡兔同笼问题</h2>
        <p>
            鸡兔同笼，鸡兔一共<input type="number" ">
            只。笼子里脚一共<input type=" number" ">
            只，请问分别有多少只鸡和兔？<button>计算</button>
            
        </p>
        <div id=" result">
    </div>
    </div>

    <script>
        var input = document.querySelectorAll('input')
        var button = document.querySelector('button')
        var result = document.querySelector('#result')
        button.onclick = function () {
            result.style.cssText = 'color:red;'
            s = '无解'
            for (i = 0; i <= input[0].value && 4 * i <= input[1].value; i++) {
                if (4 * i + 2 * (input[0].value - i) == input[1].value) {
                    var j = input[0].value - i;
                    result.style.cssText = 'color:blue;'
                    s = '分别有鸡:' + j + '只，有兔子'
                        + i + '只';
                }
            }
            result.innerHTML = s
        }
    </script>
</body>

</html>